Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function () {
		var currentTab = 0;
        var timeline = new Ext.Component({
            title: 'Live Feed',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                '<div class="tweet">',
                '<div class="tweet-content">',
                '<h2>{Username}</h2>',
                '<p>{Text}</p>',
                '</div>',
                '</div>',
                '</tpl>'
            ]
        });
        var top10 = new Ext.Component({
            title: 'Top Tweets',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                '<div class="tweet">',
                '<div class="tweet-content">',
                '<h2>{Username}</h2>',
                '<p>{Text}</p>',
                '</div>',
                '</div>',
                '</tpl>'
            ],
        });      
        var refresh = function () {
            Ext.util.JSONP.request({                           // Make an external call using JSONP
                url: 'http://server.ats-incorporated.com/shared/alex/sencha/src/data.php',    // to this URL
                callbackKey: 'callback',                        // Set the required Twitter callback parameter                
                callback: function (data) {
                    console.log(data);                         // Provide structure to hold data from Twitter callback
                    top10.update(data.top10[0]);                      // Update the tweets in timeline
                    timeline.update(data.live[0]);
                }
            });
        };



        var panel = new Ext.TabPanel({
            fullscreen: true,
            cardSwitchAnimation: 'slide',
            items: [timeline,top10]
        });

        var tabBar = panel.getTabBar();
        tabBar.addDocked({
            cls: 'refreshBtn',
            xtype: 'button',
            ui: 'plain',
            iconMask: true,
            iconCls: 'refresh',
            dock: 'right',
            stretch: false,
            align: 'center',
            handler: refresh
        });
        setInterval ( refresh, 5000);
        panel.doComponentLayout();
    }
});